<template>
    <div class="center">
        <div class="think">
            <input type="text" placeholder="写下自己的想法···" maxlength="20" v-model='id_input' id="text" @input="desclnput" />
            <p id="input_length_limit">
                <span id="input_length_max">{{number}}</span>
            </p>
        </div>
        <div class="txhz btn">
            <button @click="empty" type="info" plain class="chongzhi">重置</button>
            <button @click="tj" type="info" plain class="chongzhi"><router-link to="Teacher">提交</router-link></button>
        </div>
    </div>
</template>
<script>
    import axios from "axios"
    export default{
        data(){
            return{
                id_input:"",
                number:"20"
            }
        },
        methods:{
            empty(){
                this.id_input=""
            },
            tj(){
                axios
                    .get('/Teapublish/publish',{id:localStorage.getItem("ids"),title:this.id_input})
                    .then(res=>{
                        console.log(res)
                    })
            },
            desclnput(){
                var txtVal=this.id_input.length;
                this.number=20-txtVal
            }
        }
    }
</script>
<style scoped>
.txhz{display:flex;flex-wrap:wrap;justify-content:space-between;}
    .center{width: 90%;margin: 1rem auto;}
    .think{border-bottom: 1px solid #ccc;position: relative;}
    .think input{width: 80%;padding: 1rem 0;border: 0;outline: none;cursor: pointer;}
    p{width: 20%;height: 40px;line-height: 50px;float: right;text-align: center;color: #ccc;position: absolute;top: 0;left: 20rem;}
    .btn button{margin-top: 32rem;width: 45%;padding: 0.7rem 1rem;border-radius: 10px;border: 0;background-color: #00B7EE;color: #fff;outline: none;}
    .btn button:first-child{border: 1px solid #C8C8C8;color: #585858;background-color: #fff;}
    a{text-decoration: none;color: #fff;}
</style>
